<template>
  <div id="app">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showThis">打印this</button>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left></Left>
     <Right></Right>
    </div>
    <Father></Father>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Test from '@/components/test.vue'
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Father from '@/components/Father.vue'

export default {
  name: 'App',
  components: {
    Left,
    Right,
    Father
  },
  methods: {
    showThis() {
      console.log(this.$refs.myh1);
      this.$refs.myh1.style.color = 'red'
    }
  }
}
</script>

<style lang="less">
#app {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
